<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
<div class="box">
    <div class="leftbox">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <h1></h1>
        <div id="bubble1"></div>
        <div id="bubble2"></div>
        <div id="board"></div>
    </div>
    <div class="rightbox">
        <span id="info">游戏的重要信息</span>
        <span>当前时间：</span>
        <span id="time">加载中....</span>
        <span>游戏状态:</span>
        <span id="res">加载中....</span>
        <span>挡板打球次数:</span>
        <span id="times">加载中....</span>
        <span>游戏得分:</span>
        <span id="score">加载中....</span>
    </div>
    <button id="start">开始游戏</button>
    <button id="end">暂停游戏</button>
</div>
</body>
</html>
<script src="jquery.js"></script>
<script>
    //生成板块的颜色随机数
    function random(max, min) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    var $li = $("li");
    $.each($li, function (i) {
        $li.eq(i).css('backgroundColor', "rgb(" + random(0, 255) + "," + random(0, 255) + "," + random(0, 255) + ")");
    });
    $("#bubble1").css('backgroundColor', "rgb(" + random(0, 255) + "," + random(0, 255) + "," + random(0, 255) + ")");
    $("#bubble2").css('backgroundColor', "rgb(" + random(0, 255) + "," + random(0, 255) + "," + random(0, 255) + ")");
    $("#board").css('backgroundColor', "rgb(" + random(0, 255) + "," + random(0, 255) + "," + random(0, 255) + ")");
    var btn = document.querySelector("#start");
    var bttn = document.querySelector("#end");
    var bubble1 = document.querySelector("#bubble1");
    var bubble2 = document.querySelector("#bubble2");
    var timer = null;
    btn.onclick = function () {
        //挡板运动
        var board = document.querySelector("#board");
        var leftbox = document.querySelector(".leftbox");
        var speed = 50;
        //板块移动
        document.onkeyup = function (e) {
            if (e.key === 'ArrowRight') {
                board.style.left = board.offsetLeft + speed + "px";
                if (board.offsetLeft > leftbox.offsetWidth - board.offsetWidth) {
                    board.style.left = leftbox.offsetWidth - board.offsetWidth + "px";
                }
            }
            if (e.key === 'ArrowLeft') {
                board.style.left = board.offsetLeft - speed + "px";
                if (board.offsetLeft < 0) {
                    board.style.left = 0
                }
            }
        };
        var speedX;
        var speedY;
        bubble1.speedX = 15;
        bubble2.speedX = 10;
        bubble1.speedY = -15;
        bubble2.speedY = -10;
        var number = 0;
        var scoretimers = 0;
        var bubble = document.querySelector("#bubble");
        var res = document.querySelector("#res");
        var times = document.querySelector("#times");
        var score = document.querySelector("#score");
        var time = document.querySelector("#time");
        clearInterval(timer);
        timer = setInterval(function () {
            move(bubble1);
            move(bubble2);
            rebound(bubble1, board);
            rebound(bubble2, board);
            reboundlist(bubble1);
            reboundlist(bubble2);
            if( collide_block(bubble1,bubble2)){
                var temp1;
                var temp2;
                temp1=bubble1.speedX;
                temp2=bubble1.speedY;

                bubble1.speedX=bubble2.speedX;
                bubble1.speedY=bubble2.speedY;

                bubble2.speedX=temp1;
                bubble2.speedY=temp2;
            }
        }, 100);
        

        //小球移动
        function move(e) {
            var left = e.offsetLeft + e.speedX;
            var top = e.offsetTop + e.speedY;
            e.style.left = left + "px";
            e.style.top = top + "px";
            if (e.offsetLeft > leftbox.offsetWidth - e.offsetWidth) {
                e.offsetLeft = leftbox.offsetWidth - e.offsetWidth;
                e.speedX *= -1;
            }
            if (e.offsetTop < 0) {
                e.offsetTop = 0;
                e.speedY *= -1;
            }
            if (e.offsetLeft < 0) {
                e.offsetLeft = 0;
                e.speedX *= -1;
            }
            if (e.offsetTop >= leftbox.offsetHeight - e.offsetHeight) {
                $("h1").html("GameOver!");
                clearInterval(timer);
                res.innerHTML = "游戏结束了!";
            }

        }

        //小球与挡板的反弹
        function rebound(e1, e2) {
            if (e1.offsetTop + e1.offsetHeight >= e2.offsetTop) {
                if (e1.offsetLeft + e1.offsetWidth >= e2.offsetLeft) {
                    if (e1.offsetLeft < e2.offsetLeft + e2.offsetWidth) {
                        e1.speedY *= -1;
                        number++;
                        times.innerHTML = "挡板挡了" + number + "次";
                    }
                }

            }
        }

        //小球与砖块我的反弹
        function reboundlist(e) {
            var lis = document.querySelectorAll("li");
            for (var j = 0; j < lis.length; j++) {
                if (e.offsetTop < lis[j].offsetHeight + lis[j].offsetTop) {
                    if (e.offsetLeft < lis[j].offsetLeft + lis[j].offsetWidth) {
                        if (e.offsetLeft >= lis[j].offsetLeft) {
                            lis[j].style.display = "none";
                            e.speedY *= -1;
                            scoretimers++;
                            score.innerHTML = scoretimers + "分";
                            // break;
                        }
                    }
                }
            }
        }

       //两元素发生碰撞
        function collide_block(block1, block2) {
            var left1 = parseInt(window.getComputedStyle(block1).left);
            var left2 = parseInt(window.getComputedStyle(block2).left);

            var top1 = parseInt(window.getComputedStyle(block1).top);
            var top2 = parseInt(window.getComputedStyle(block2).top);

            var width1 = parseInt(window.getComputedStyle(block1).width);
            var width2 = parseInt(window.getComputedStyle(block2).width);

            var height1 = parseInt(window.getComputedStyle(block1).height);
            var height2 = parseInt(window.getComputedStyle(block2).height);

            //两元素发生碰撞的原理
            //两元素发生碰撞时，水平方向上  两元素中心点的距离要小于等于两元素宽之和的二分之一倍
            //                  垂直方向上  两元素中心点的距离要小于等于两元素高之和的二分之一倍

            //获取两元素的中心坐标
            var center1 = {
                x: left1 + width1 / 2,
                y: top1 + height1 / 2,
            };
            var center2 = {
                x: left2 + width2 / 2,
                y: top2 + height2 / 2,
            };

            var countX = Math.abs(center1.x - center2.x);
            var countY = Math.abs(center1.y - center2.y);
            if(countX < (width1 + width2) / 2 && countY < (height1 + height2) / 2) {
                return true;
            }
            return false;
        }


        //时间格式化
        function formateTime(time) {
            return time > 9 ? time : "0" + time;
        }

        var date = new Date();
        time.innerHTML = date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDay() + "日";
    };
    bttn.onclick=function () {
        clearInterval(timer);
    }
</script>

